<template>
    <div>
    
        <cu-navbar>
            <block slot="content">推广</block>
        </cu-navbar>
        <view class="tuiguang-page page">
            <div class="cell-group f-r a-c j-b">
                <div class="f-g f-r a-c">
                    <div class="cell-name">推广码：</div>
                    <div class="cell-value">{{ userInfo.invitecode }}</div>
                </div>
                <div class="button" @click="copy(userInfo.invitecode)">复制</div>
            </div>
            <div class="cell-group f-r a-c j-b"  style="width: 100%">
                <div class="f-g f-r a-c" style="width: 100%">
                    <div class="cell-name f-s">推广链接：</div>
                    <div class=" cell-name f-g" style="word-break: break-all">{{ url }}</div>
                </div>
                <div class="button f-s" @click="copy(url)">复制</div>
            </div>
            <div style="display: flex;align-items: center;justify-content:center;padding: 20px">
                <qrcode v-if="url" ref="qr" canvas-id="qr" :value="url" :size="size" @complete="complete($event)"></qrcode>
            </div>
            <div class="submit" @click="save">保存</div>
        </view>
    </div>
</template>

<script>
	import userInfo from "../../mixins/userInfo";
  import qrcode from "../../uni_modules/Sansnn-uQRCode/components/uqrcode/uqrcode";
  export default {
      mixins: [userInfo],
      components: {
          qrcode
      },
		data() {
			return {
          url: '',
          size: 200
			}
		},
      onShow() {
          setTimeout(() => {
              this.url = window.origin + '/#/pages/login/register?code=' + this.userInfo.invitecode
          },300)
      },
		methods: {
		    copy(data) {
            uni.setClipboardData({
                //去找上面的数据
                data,
                success: function (res) {
                    uni.showToast({
                        title: "复制成功",
                    });
                },
                fail: function (res) {
                    console.log(res);
                },
            });
        },
        complete(e) {
            if (e.success) {
                console.log('生成成功');
            } else {
                console.log('生成失败');
            }
        },
        remake() {
            const ref = this.$refs['qr'];
            ref.remake();
        },
        save() {
            uni.showLoading({
                title: '保存中',
                mask: true
            });
            const ref = this.$refs['qr'];
            ref.save({
                success: res => {
                    uni.hideLoading();
                    uni.showToast({
                        icon: 'success',
                        title: '保存成功'
                    });
                },
                fail: err => {
                    uni.showToast({
                        icon: 'none',
                        title: JSON.stringify(err)
                    });
                }
            });

        }
		}
	}
</script>

<style lang="scss">
.tuiguang-page {
	min-height: 100%;
  * {
    box-sizing: border-box;
  }
	.cell-group {
		padding: 0 30rpx;
		background-color: #fff;
		border-bottom: 1px solid #ededed;
		height: 100px;
		.cell-name {
			font-size: 13px;
      text-align: left;
		}
		.cell-value {
			    font-size: 20px;
			    font-weight: 700;
			    color: #333;
		}
		.button {
			width: 50px;
			    height: 27px;
			    line-height: 27px;
			    text-align: center;
			    background: #ff443b;
			    border-radius: 4px;
			    font-size: 13px;
			    font-weight: 400;
			    color: #fff;
		}
	}
}
</style>

